<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合案例</title>
    <link rel="stylesheet" href="../elementui/index.css">
    <link rel="stylesheet" href="../css/style.css">
</head>

<body>
<div id="app-container">
    <el-container>
        <!-- 顶部栏 -->
        <el-header class="header">
            <div class="logo">
                <span class="title">Briup综合案例</span>
            </div>
        </el-header>
        <el-container>
            <!-- 左侧导航栏 -->
            <el-aside class="sidebar" style="width: 200px;">
                <el-menu default-active="1" class="el-menu-vertical-demo" @select="handleMenuSelect">
                    <el-menu-item index="1">
                        <i class="el-icon-document"></i>
                        <span slot="title" style="color: aliceblue;">图书管理</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <!-- 右侧内容区域 -->
            <el-main class="main" style="flex: 1;">
                <!-- 图书管理 -->
                <div v-if="activeTab === '1'">
                    <!-- 搜索 -->
                    <el-card style="margin-bottom: 25px;">
                        <el-row style="margin-top: 25px;">
                            <el-form>
                                <el-col :span="6">
                                    <el-form-item label="关键字">
                                        <el-input v-model="keyword" placeholder="书名/作者/出版社" style="width: 280px;"
                                                  clearable></el-input>
                                    </el-form-item>
                                </el-col>

                                <el-col :span="6">
                                    <el-form-item label="分类">
                                        <el-cascader :options="categories" :props="{ value: 'id', label: 'name' }"
                                                     @change="handleSearchChange" v-model="categoryId"
                                                     :show-all-levels="false" placeholder="请选择图书分类" clearable></el-cascader>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6" style="min-height:1px;"></el-col>
                                <el-col :span="6">
                                    <el-button icon="el-icon-refresh" @click="reset"
                                               style="float: right;margin-left: 10px;">重置
                                    </el-button>
                                    <el-button type="primary" icon="el-icon-search" @click="getBooks"
                                               style="float: right;">搜索
                                    </el-button>
                                </el-col>
                            </el-form>
                        </el-row>
                    </el-card>

                    <!-- 操作 -->
                    <el-row style="margin-bottom: 20px;">
                        <el-button type="danger" plain icon="el-icon-delete" @click="deleteBatchByIds"
                                   :disabled="multipleSelection.length === 0" style="float: right;margin-left: 10px;">批量删除
                        </el-button>
                        <el-button type="success" plain icon="el-icon-plus" @click="add" style="float: right;">添加
                        </el-button>
                    </el-row>

                    <!-- 表格 -->
                    <el-table v-loading="loading" :data="books" @selection-change="handleSelectionChange"
                              style="width: 100%; margin-top: 20px;" stripe border>
                        <el-table-column type="selection" align="center" width="60" fixed="left">
                        </el-table-column>
                        <el-table-column prop="id" label="图书编号" align="center" width="80" fixed="left">
                        </el-table-column>
                        <el-table-column prop="name" label="图书名称" align="center" width="300">
                        </el-table-column>
                        <el-table-column prop="description" label="图书描述" align="center" width="300">
                        </el-table-column>
                        <el-table-column prop="author" label="图书作者" align="center" width="80">
                        </el-table-column>
                        <el-table-column prop="publisher" label="图书出版社" align="center" width="300">
                        </el-table-column>
                        <el-table-column prop="price" label="图书价格" align="center" width="80">
                            <template slot-scope="scope">
                                <span v-if="scope.row.price">{{ scope.row.price }}元</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="图书库存" align="center" width="80">
                            <template slot-scope="scope">
                                <span v-if="scope.row.storeNum">{{ scope.row.storeNum }}本</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="图书状态" align="center" width="100">
                            <template slot-scope="scope">
                                <el-tag v-if="scope.row.status === 0">上架</el-tag>
                                <el-tag v-if="scope.row.status === 1" type="info">下架</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="category.name" label="图书所属分类" align="center" width="120">
                        </el-table-column>
                        <el-table-column label="操作" width="300" align="center" fixed="right">
                            <template slot-scope="scope">
                                <el-button type="text" icon="el-icon-edit"
                                           @click="edit(scope.row.id, scope.row.name)"
                                           style="color: #DCA550">修改</el-button>
                                <el-button type="text" icon="el-icon-delete"
                                           @click="removeBook(scope.row.id, scope.row.name)"
                                           style="color:#E47370;">删除</el-button>
                                <el-button type="text" v-if="scope.row.status === 0" icon="el-icon-bottom"
                                           style="color: #919398"
                                           @click="updateStatus(scope.row.id, scope.row.status, scope.row.name)">下架
                                </el-button>
                                <el-button type="text" v-else-if="scope.row.status === 1" icon="el-icon-top"
                                           style="color: #5A9CF8"
                                           @click="updateStatus(scope.row.id, scope.row.status, scope.row.name)">上架
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <!--分页栏-->
                    <el-pagination :page-size.sync="pageSize" layout="total, sizes, prev, pager, next, jumper"
                                   :total="total" :page-sizes="[5, 10, 15, 20, 25]" :current-page.sync="pageNum"
                                   @current-change="getBooks"
                                   @size-change="getBooks"></el-pagination>

                    <!-- 新增或者修改图书信息弹窗 -->
                    <el-dialog :title="title" :visible.sync="dialogVisible" width="50%">
                        <el-form :rules="rules" ref="dataForm" :model="book" label-width="150px"
                                 style="padding-right: 40px;">
                            <el-form-item label="图书名称" prop="name">
                                <el-input v-model="book.name" />
                            </el-form-item>

                            <el-form-item label="图书详情">
                                <el-input v-model="book.description" />
                            </el-form-item>

                            <el-form-item label="图书作者" prop="author">
                                <el-input v-model="book.author" />
                            </el-form-item>

                            <el-form-item label="图书出版社" prop="publisher">
                                <el-input v-model="book.publisher" />
                            </el-form-item>

                            <el-form-item label="图书价格">
                                <el-input v-model="book.price" type="number" min="0" />
                            </el-form-item>

                            <el-form-item label="图书库存">
                                <el-input v-model="book.storeNum" type="number" min="0" />
                            </el-form-item>

                            <el-form-item label="图书分类">
                                <div class="block">
                                    <el-cascader :options="categories" :props="{ value: 'id', label: 'name' }"
                                                 @change="handleInsertOrUpdateChange" v-model="book.categoryId"
                                                 :show-all-levels="false"></el-cascader>
                                </div>
                            </el-form-item>

                        </el-form>
                        <span slot="footer" class="dialog-footer">
                                <el-button @click="cancel" icon="el-icon-refresh-right">取
                                    消</el-button>
                                <el-button type="primary" icon="el-icon-check" @click="saveOrUpdate">确
                                    定</el-button>
                            </span>
                    </el-dialog>
                </div>
            </el-main>
        </el-container>
    </el-container>
</div>

<script src="../js/vue.min.js"></script>
<script src="../js/axios.min.js"></script>
<script src="../elementui/index.js"></script>
<script src="../js/util.js"></script>
<script>
    new Vue({
        el: '#app-container',
        data: {
            activeTab: '1',                 // 导航栏模块索引
            keyword: '',                    // 搜索关键字（书名、作者名、出版社）
            categoryId: '',                 // 搜索分类编号
            books: [],                      // 所有图书信息
            book: {},                       // 新增或者修改的图书信息
            categories: [],                 // 所有分类的集合
            multipleSelection: [],          // 批量删除的编号
            loading: true,                  // 表格数据是否显示加载动画
            dialogVisible: false,           // 新增或者修改弹出框
            title: '',                      // 新增或者修改弹出框标题
            pageNum: 1,                     // 当前页码
            pageSize: 5,                    // 每页大小
            total: 0,                       // 数据总条数
            // 新增或者修改时非空字段校验规则
            rules: {
                name: [{ required: true, message: '图书名称不能为空', trigger: 'blur' }],
                author: [{ required: true, message: '图书作者不能为空', trigger: 'blur' }],
                publisher: [{ required: true, message: '图书出版社不能为空', trigger: 'blur' }]
            }
        },
        created() {
            // 获取图书信息
            this.getBooks()
            // 获取图书管理下拉框分类信息
            this.getCategories()
        },
        methods: {
            // 切换菜单
            handleMenuSelect(index) {
                this.activeTab = index
            },

            // 表格获取图书信息
            getBooks() {
                axios.get("/books/pageNew", {
                    params: {
                        keyword: this.keyword,
                        categoryId: this.categoryId,
                        pageNum: this.pageNum,
                        pageSize: this.pageSize
                    }
                }).then(response => {
                    // 无分页查询
                    // this.books = response.data.data

                    // 开启分页查询
                    this.books = response.data.data.list
                    this.total = response.data.data.total

                    this.loading = false
                }).catch(error => {
                    this.$message.error("请求失败，请联系管理员")
                })
            },

            // 下拉框获取分类信息
            getCategories() {
                axios.get("/categorys").then(response => {
                    this.categories = getTreeData(response.data.data)
                }).catch(error => {
                    this.$message.error("请求失败，请联系管理员")
                })
            },

            // 搜索时，分类下拉框数据改变回调，为categoryId赋值
            handleSearchChange(value) {
                if (value) {
                    this.categoryId = value[value.length - 1]
                }
            },

            // 新增/修改时，分类下拉框数据改变回调，为categoryId赋值
            handleInsertOrUpdateChange(value) {
                if (value) {
                    this.book.categoryId = value[value.length - 1]
                }
            },

            // 点击重置按钮
            reset() {
                this.keyword = ''
                this.categoryId = ''
                this.getBooks()
            },

            // 点击添加按钮
            add() {
                this.book = {}
                this.title = "添加图书"
                this.dialogVisible = true
            },

            // 点击取消按钮
            cancel() {
                this.$message.warning("取消" + this.title)
                this.book = {}
                this.dialogVisible = false
            },

            // 批量删除获取选择的记录编号
            handleSelectionChange(selection) {
                this.multipleSelection = selection.map(item => {
                    return item.id
                })
            },

            // 点击修改按钮
            edit(id, name) {
                axios.get('/books/' + id).then(response => {
                    if (response.data.code === 1) {
                        this.book = response.data.data
                        this.title = "修改图书"
                        this.dialogVisible = true
                    } else {
                        this.$message.error(response.data.msg)
                    }
                }).catch(error => {
                    this.$message.error("请求失败，请联系管理员")
                })
            },

            // 点击弹出框的保存按钮
            saveOrUpdate() {
                // 参数校验
                this.$refs.dataForm.validate((valid) => {
                    // 校验成功
                    if (valid) {
                        // 根据是否传递id属性判断是修改还是添加
                        if (!this.book.id) {
                            // 添加图书
                            this.addBook()
                        } else {
                            // 修改图书
                            this.modifyBook()
                        }
                    } else {
                        this.$message.error('指定参数不能为空！')
                        return false
                    }
                })
            },

            // 保存图书的方法
            addBook() {
                axios.post('/books', this.book)
                    .then(response => {
                        if (response.data.code === 1) {
                            this.$message.success('添加《' + this.book.name + '》成功')
                            this.dialogVisible = false
                            this.getBooks()
                        } else {
                            this.$message.error(response.data.msg)
                        }
                    }).catch(error => {
                    this.$message.error("请求失败，请联系管理员")
                })
            },

            // 修改图书信息
            modifyBook() {
                axios.put('/books', this.book)
                    .then(response => {
                        if (response.data.code === 1) {
                            this.$message.success('修改《' + this.book.name + '》成功')
                            this.dialogVisible = false
                            this.getBooks()
                            this.book = {}
                        } else {
                            this.$message.error(response.data.msg)
                        }
                    }).catch(error => {
                    this.$message.error("请求失败，请联系管理员")
                })
            },

            // 点击上架/下架按钮，修改图书状态
            updateStatus(id, curStatus, name) {
                let status = 0
                let msg = ''
                if (curStatus === 0) {
                    msg = '确定要下架《' + name + '》吗？'
                    status = 1
                } else {
                    msg = '确定要上架《' + name + '》吗？'
                }
                this.$confirm(msg, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.put('/books/' + id + "/" + status).then(response => {
                        if (response.data.code === 1) {
                            if (curStatus === 0) {
                                this.$message.success('《' + name + '》下架成功')
                            } else {
                                this.$message.success('《' + name + '》上架成功')
                            }
                            this.getBooks()
                        } else {
                            this.$message.error(response.data.msg)
                        }
                    }).catch(error => {
                        this.$message.error("请求失败，请联系管理员")
                    })
                }).catch(() => {
                    if (curStatus === 0) {
                        this.$message.info('已取消下架《' + name + '》')
                    } else {
                        this.$message.info('已取消上架《' + name + '》')
                    }
                })
            },

            // 点击删除按钮
            removeBook(id, name) {
                this.$confirm('此操作将永久删除《' + name + '》这本书, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete('/books/' + id).then(response => {
                        if (response.data.code === 1) {
                            this.$message.success('删除《' + name + '》成功')
                            this.getBooks()
                        } else {
                            this.$message.error(response.data.msg)
                        }
                    }).catch(error => {
                        this.$message.error("请求失败，请联系管理员")
                    })
                }).catch(() => {
                    this.$message.info('已取消删除《' + name + '》')
                })
            },

            // 批量删除获取选择的记录编号
            handleSelectionChange(selection) {
                this.multipleSelection = selection.map(item => {
                    return item.id
                })
            },

            deleteBatchByIds() {
                const length = this.multipleSelection.length
                this.$confirm('此操作将永久删除这' + length + '本书籍, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete('/books', {
                        data : this.multipleSelection
                    } ).then(response => {
                        if(response.data.code === 1) {
                            this.$message.success('批量删除这'+length+'条信息成功')
                            this.getBooks()
                        }else {
                            this.$message.error(response.data.msg)
                        }
                    }).catch(error => {
                        this.$message.error("请求失败，请联系管理员")
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
            },
        }
    })
</script>
</body>

</html>